<template>

  <div>
    <div>
      <el-input
        class="inputAdd"
        size="small"
        placeholder="添加职位..."
        suffix-icon="el-icon-plus"
        v-model="inputValue.name"
      >
      </el-input>
      <el-button type="primary" size="small" @click="addPosition"
        >添加</el-button
      >
    </div>
    <div>
      <el-table border stripe :data="tableData" style="width: 50%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="id" width="80"> </el-table-column>
        <el-table-column prop="name" label="职位" width="150">
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="150">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="editPostion(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
       <el-button type="danger" style="margin-top:10px" :disabled='this.handleSelectionArr.length==0' @click="delectAll">批量删除</el-button>
       <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
        >
         <el-tag >职位</el-tag>
         <el-input v-model="updateInputValue.name" placeholder="请输入职位" size="small" class="inputUpdate"></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="clickUpdate" 
              >确 定</el-button
            >
          </span>
        </el-dialog>
    </div>
   
  </div>
</template>

<script>
export default {
  name: "PosMana",
  data() {
    return {
      inputValue: {
        name: "",
      },
      tableData: [],
      dialogVisible:false,
  updateInputValue:{
     name: ""
  },
   handleSelectionArr:[]
    };
  },
  mounted() {
    this.innitPosition();
  },
  methods: {
    //初始化
    innitPosition() {
      this.getRequest("/ststem/basic/pos/").then((resp) => {
        if (resp) {
          this.tableData = resp;
        }
      });
    },
    // 添加职位
    addPosition() {
      if (this.inputValue.name) {
        this.postRequest("/ststem/basic/pos/", this.inputValue).then((resp) => {
          if (resp) {
            this.innitPosition();
            this.inputValue.name = "";
          }
        });
      } else {
        this.$message.error("信息为空不能添加");
      }
    },
    //删除
    handleDelete(index, data) {
      this.$confirm(
        "此操作将永久删除" + data.name + "," + "是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteRequest("/ststem/basic/pos/", data.id).then((resp) => {
            if (resp) {
              this.innitPosition();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editPostion(index,data){
      this.dialogVisible=true;
     Object.assign(this.updateInputValue,data);
     this.updateInputValue.createDate='';
    },
    clickUpdate(){
       this.putRequest("/ststem/basic/pos/", this.updateInputValue).then((resp) => {
          if (resp) {
            this.innitPosition();
            this.dialogVisible=false
          }
        });
        
    },
    //获取选中框的数组
    handleSelectionChange(data){
     this. handleSelectionArr=data
    },
     delectAll(){
    // let ids='';
    //  this. handleSelectionArr.forEach(element => {
    //    ids='?'
    //    ids+='ids='+element.id+'&';
    //  });
    this.$confirm(
        "此操作将永久删除" + '['+this.handleSelectionArr.length+']' +'条'+ "," + "是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let ids='?';
            this. handleSelectionArr.forEach(element => {
       ids+='ids='+element.id+'&';
     });
          this.deleteRequest("/ststem/basic/pos/", ids).then((resp) => {
            if (resp) {
              this.innitPosition();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
  }
  },
 
};
</script>

<style>
.inputAdd {
  width: 300px;
  margin-right: 10px;
}
.inputUpdate{
  width: 250px;
  margin-left: 8px;
}
</style>
